import Head from 'next/head';
import { InstallCommand } from '../../../components/mdx/InstallCommand';
import { FAQs } from '../../../components/mdx/FAQs';
import { CompatibilityTable } from '../../../components/mdx/CompatibilityTable';

<Head>
  <title>{'Installation - Material React Table V3 Docs'}</title>
  <meta name="description" content="How to install Material React Table" />
</Head>

## Installation

These are install instructions for the latest version of Material React Table (V3)

### Compatibility

First, before installing Material React Table, let's make sure you have the correct versions of React, Material UI, and Material UI X Date Pickers installed.

<CompatibilityTable />

> `material-react-table` requires **Material UI V6** packages as dependencies in your project.
>
> If you are already using Material UI, you probably already have most of these peer dependencies installed.
>
> Just double-check that you have the following in your package.json, or use the [full install commands](<#install-with-required-peer-dependencies-(recommended)>) below.
>
> 1.  `@mui/material` (V6)
> 2.  `@mui/x-date-pickers` (v6)
> 3.  `@mui/icons-material` (V6)
> 4.  `@emotion/react` (v11)
> 5.  `@emotion/styled` (v11)
> 6.  `react` and `react-dom` (v18+)

### Quick Install

<InstallCommand packagesString="material-react-table" />

### Install With Required Peer Dependencies (Recommended)

<InstallCommand />

> You do NOT need to install `@tanstack/react-table`, as it is already an internal dependency of `material-react-table`, and must use an exact version already specified internally.
>
> All internal dependencies: `@tanstack/match-sorter-utils`, `@tanstack/react-table`, `@tanstack/react-virtual`, and `highlight-words`

### Common Errors

If you see a react import error like this:

```bash
Uncaught TypeError: (0 , import_react15.useId) is not a function
    at useMRT_TableOptions (useMRT_TableOptions.ts:95:8)
    at useMaterialReactTable (useMaterialReactTable.ts:12:24)
```

It means that you don't have the correct version of React installed. Make sure you have React 18.0 or higher.

---

If you get an error like this:

```bash
"Error: Element type is invalid: expected a string (for built-in components)
or a class/function (for composite components) but got: undefined.
```

You likely forgot to export your component from the file it's defined in,
or you might have mixed up default and named imports.

Or You might be trying to import `MaterialReactTable` from the default export still, which is no longer supported in v2+. Make sure you are importing the named export instead:

```diff
- import MaterialReactTable from 'material-react-table'
+ import { MaterialReactTable } from 'material-react-table'
```

Or you probably do not have the correct version of Material UI installed. Make sure all material ui packages are at least V6.0 or higher if you are using MRT v3 or higher.

---

If you are using an older version of `webpack` or `create-react-app` and get an error like this:

```bash
./node_modules/@tanstack/virtual-core/build/lib/index.esm.js 147:92
Module parse failed: Unexpected token (147:92)
File was processed with these loaders:
```

Then try upgrading either `webpack` or `react-scripts` to the latest versions.

### FAQs

<FAQs
  faqStructuredData={{
    '@context': 'https://schema.org',
    '@type': 'FAQPage',
    mainEntity: [
      {
        '@type': 'Question',
        name: 'Why is React 18 required for Material React Table?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: '<p>As of MRT V3, it uses some React 18+ features, so React 18 is required. MRT V2 and below are compatible with React 17.</p>',
        },
      },
      {
        '@type': 'Question',
        name: "Should I install '@tanstack/react-table' in my package.json for Material React Table?",
        acceptedAnswer: {
          '@type': 'Answer',
          text: "<p><b>No</b>, you do not need to install TanStack Table in your project manually, as the latest TanStack Table version automatically gets installed under the hood by MRT itself as an internal dependency. You can import and functions from '@tanstack/react-table' too.</p>",
        },
      },
      {
        '@type': 'Question',
        name: 'Is TypeScript required to use Material React Table?',
        acceptedAnswer: {
          '@type': 'Answer',
          text: '<p><b>No</b>, TypeScript is <b>not required</b> to use Material React Table, but it is a whole lot easier to use Material React Table with TypeScript, <b>especially when defining columns</b>. If you do use TypeScript, try to keep the latest TypeScript version installed, or at least <b>TS version 4.8</b> or higher.</p>',
        },
      },
    ],
  }}
/>
